{extend name="common/head"/}
<link rel="stylesheet" href="{__ADMIN__}/js/jquery-tagsinput/jquery.tagsinput.min.css">
<link href="{__ADMIN__}/css/style.min.css" rel="stylesheet">
{block name="body"}
<style>
	.lyear-uploads-pic {
		display: inherit;
	}
	.lyear-uploads-pic > li.list-inline-item {
		margin-top: 10px;
	}
	.lyear-uploads-pic li.list-inline-item .progress {
		position: absolute;
		bottom: 0px;
		margin-bottom: 0px;
		left: 5px;
		right: 5px;
	}
	.lyear-uploads-pic .success,
	.lyear-uploads-pic .error {
		position: absolute;
		top: 0px;
		background-color: rgba(0, 0, 0, .125);
		right: 5px;
		left: 5px;
		color: #fff;
		text-align: center;
	}
	.lyear-uploads-pic figure img {
		width: auto;
		max-width: 100%;
		max-height: 110px;
	}
	.lyear-uploads-pic figure {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f5f5f5;
	}
	.webuploader-container label {
		margin-bottom: 0px;
	}
</style>
<div class="container-fluid p-t-15">

	<div class="row">
		<div class="col-lg-12">
			<div class="card">
				<div class="card-body">

					<form onsubmit="return false" action="#!" method="post" class="row" id="form1">
						<div class="form-group col-md-12">
							<label for="title">用户名</label>
							<input class="form-control-plaintext" type="text" placeholder="{$admin.username}" readonly value="{$admin.username}">
						</div>
						<div class="form-group col-md-12 file-group">
							<label for="web_site_logo">头像</label>
							<div class="input-group">
								<input type="text" class="form-control file-value" name="thumb" value="{$admin.thumb}" placeholder="头像图片地址" />
								<input type="file" accaccept=".png,.jpg,.jpeg,.bmp,.gif" class="d-none" />
								<div class="input-group-append">
									<button class="btn btn-default file-browser" type="button">上传图片</button>
								</div>
							</div>
						</div>
						<div class="form-group col-md-12">
							<label for="title">昵称</label>
							<input type="text" class="form-control" id="nickname" name="nickname" value="{$admin.nickname}" placeholder="请输入昵称" />
						</div>
						<div class="form-group col-md-12">
							<label for="title">手机</label>
							<input type="text" class="form-control" id="mobile" name="mobile" value="{$admin.mobile}" placeholder="请输入手机" />
						</div>
						<div class="form-group col-md-12">
							<button type="submit" class="btn btn-primary ajax-post" target-form="add-form" onclick="add()">确 定</button>
						</div>
					</form>

				</div>
			</div>
		</div>

	</div>

</div>
{/block}
{block name="script"}
{include file="common/footer" base="base" /}
<!--标签插件-->
<script src="{__ADMIN__}/js/jquery-tagsinput/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="{__ADMIN__}/js/main.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(document).on('click', '.file-browser', function() {
			var $browser = $(this);
			var file = $browser.closest('.file-group').find('[type="file"]');
			file.on( 'click', function(e) {
				e.stopPropagation();
			});
			file.trigger('click');
		});

		$(document).on('change', '.file-group [type="file"]', function() {
			var $this    = $(this);
			var $input   = $(this)[0];
			var $len     = $input.files.length;
			var formFile = new FormData();

			if ($len == 0) {
				return false;
			} else {
				var fileAccaccept = $this.attr('accaccept');
				var fileType      = $input.files[0].type;
				var type          = (fileType.substr(fileType.lastIndexOf("/") + 1)).toLowerCase();

				if (!type || fileAccaccept.indexOf(type) == -1) {
					jQuery.notify({
								icon: '',
								message: '您上传图片的类型不符合(.jpg|.jpeg|.gif|.png|.bmp)'
							},
							{
								element: 'body',
								type: 'danger',
								allow_dismiss: true,
								newest_on_top: true,
								showProgressbar: false,
								placement: {
									from: 'top',
									align: 'center'
								},
								offset: 20,
								spacing: 10,
								z_index: 10800,
								delay: 1000,
								animate: {
									enter: 'animated shake',
									exit: 'animated fadeOutDown'
								}
							});
					return false;
				}
				formFile.append("file", $input.files[0]);
			}

			var data = formFile;
			var l = $('body').lyearloading({
				opacity: 0.2,
				spinnerSize: 'nm'
			});

			$.ajax({
				url: '/admin/api/upload',
				data: data,
				type: "POST",
				dataType: "json",
				//上传文件无需缓存
				cache: false,
				//用于对data参数进行序列化处理 这里必须false
				processData: false,
				//必须
				contentType: false,
				success: function (res) {
					l.destroy();
					if (res.code === 0) {
						$this.closest('.file-group').find('.file-value').val(res.data.filepath);
					} else {
						jQuery.notify({
									icon: '',
									message: res.info
								},
								{
									element: 'body',
									type: 'danger',
									allow_dismiss: true,
									newest_on_top: true,
									showProgressbar: false,
									placement: {
										from: 'top',
										align: 'center'
									},
									offset: 20,
									spacing: 10,
									z_index: 10800,
									delay: 3000,
									animate: {
										enter: 'animated shake',
										exit: 'animated fadeOutDown'
									}
								});
					}
				},
			});
		});
	});
	function add() {
		$.ajax({
			//几个参数需要注意一下
			type: "POST",//方法类型
			dataType: "json",//预期服务器返回的数据类型
			url: "/admin/api/personal_submit" ,//url
			data: $('#form1').serialize(),
			success: function (res) {
				console.log(res);//打印服务端返回的数据(调试用)
				if (res.code === 0) {
					$.alert({
						title: '成功',
						icon: 'mdi mdi-alert',
						type: 'blue',
						content: res.msg,
						buttons: {
							okay: {
								text: '确认',
								btnClass: 'btn-blue',
								action: function() {
									location.reload();
								}
							}
						}
					});
					// setTimeout(function() {
					//     //	parent.document.location.reload();
					//     parent.document.location.href="{:url('/admin/index')}";
					// }, 1500);
				}else {
					$.alert({
						title: '错误',
						icon: 'mdi mdi-alert',
						type: 'red',
						content: res.msg,
						buttons: {
							okay: {
								text: '确认',
								btnClass: 'btn-blue',
								action: function() {
									//$('[alt="captcha"]').click();
								}
							}
						}
					});
				};
			},
			error : function() {
				$.alert({
					title: '警告',
					content: '请检查返回是否正常！',
					icon: 'mdi mdi-access-point-network-off',
					animation: 'scale',
					closeAnimation: 'scale',
					buttons: {
						okay: {
							text: '确认',
							btnClass: 'btn-blue'
						}
					}
				});
			}
		});
	}
</script>
{/block}
</body>
</html>